<template>
  <div class="app">
    <el-row :gutter="24">
      <el-col :span="8">
        <dv-decoration-3 style="height: 6vh"></dv-decoration-3>
      </el-col>
      <el-col :span="8">
        <dv-decoration-7 style="height: 6vh;color: #00afff;font-size: 35px"><span class="system-title">第一工程公司-子公司业务监控平台</span>
        </dv-decoration-7>
      </el-col>
      <!--        <el-col :span="8"><img src="../assets/images/1712155508764.jpg" class="top-image" alt="Header Image"></el-col>-->
      <el-col :span="8">
        <dv-decoration-3 :reverse="true" style="height: 6vh"></dv-decoration-3>
      </el-col>
    </el-row>
    <!--    <div class="title-section">-->
    <!--        <el-row :gutter="24" class="title-row">-->
    <!--            <el-col :span="24" class="title-col">-->
    <!--                <div class="title-content">-->
    <!--                    <span class="title-text">第一工程公司-子公司业务监控平台</span>-->
    <!--                </div>-->
    <!--            </el-col>-->
    <!--        </el-row>-->
    <!--    </div>-->

    <!--左上模块 科研立项-->
    <div class="upperLeft">

      <div style="display: flex; align-items: center;">

        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">科研立项</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="display: flex; justify-content: center; align-items: center;">
        <dv-scroll-board :config="projectApprovalConfig" style="width:96%;height:19vh"/>
      </div>

    </div>

    <!--中上模块 科技成果数据统计（当年）-->
    <div class="soSo">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">科技成果数据统计（当年）</span>
      </div>
      <div style="height: 0.5vh"></div>

      <div style="color: white;left: 4%;position: absolute;">
        <el-row :gutter="90" style="margin-top: 2vh">
          <el-col :span="8" style="white-space: nowrap;">省部级科技奖: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">电建集团科技奖: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">公司科技奖: {{ 1 }}个</el-col>
        </el-row>

        <el-row :gutter="90" style="margin-top: 3vh">
          <el-col :span="8" style="white-space: nowrap;">学会协会科技奖: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">专利奖: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">其他类别: {{ 1 }}个</el-col>
        </el-row>

        <el-row :gutter="90" style="margin-top: 3vh">
          <el-col :span="8" style="white-space: nowrap;">发明专利(授权): {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">实用专利(授权): {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">外观专利(授权): {{ 1 }}个</el-col>
        </el-row>

        <el-row :gutter="90" style="margin-top: 3vh">
          <el-col :span="8" style="white-space: nowrap;">软件著作权: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">省部级工法: {{ 1 }}个</el-col>
          <el-col :span="8" style="white-space: nowrap;">企业工法: {{ 1 }}个</el-col>
        </el-row>
      </div>


    </div>

    <!--右上模块 成果鉴定-->
    <div class="upperRight">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">成果鉴定</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="appraisalTableData" height="19vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="achievementName" label="成果名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="projectSource" label="项目来源" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="processStatus" label="流程状态" align="center">
            <template slot-scope="scope">
              <el-link type="primary">{{ scope.row.processStatus }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--左中模块 企业工法-->
    <div class="leftMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">企业工法</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="constructionMethodTableData" height="24vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="constructionMethodName" label="工法名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="constructionMethodNumber" label="工法编号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="state" label="状态" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!--中间模块 荣誉图片轮播-->
    <div class="middle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">荣誉图片轮播</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="font-size: 16px;">
        <el-carousel :interval="5000" height="24vh" arrow="always" style="max-width: 94%; margin: auto;">
          <el-carousel-item v-for="item in oneCompanyHonorList" :key="item.name">
            <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
          </el-carousel-item>
        </el-carousel>
      </div>


    </div>

    <!--中下模块 会议安排-->
    <!--        <div class="lowermiddle">-->
    <!--            <div style="display: flex; align-items: center;">-->
    <!--                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>-->
    <!--                <span style="color: white">会议安排</span>-->
    <!--            </div>-->

    <!--        </div>-->

    <!--右中模块 科技进步奖（当年）-->
    <div class="rightMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">科技进步奖（当年）</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="progressAwardTableData" height="24vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="topicName" label="课题名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="awardName" label="奖项名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="dateOfIssuance" label="颁发日期" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!--左下模块 专利申请-->
    <div class="lowerLeft">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">专利申请</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="patentApplicationTableData" height="22.5vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="patentName" label="专利名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="patentType" label="专利类型" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="patentStatus" label="专利状态" align="center"></el-table-column>
        </el-table>
      </div>

    </div>

    <!--中下模块 专利授权-->
    <div class="lowerMiddle">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">专利授权</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="patentAuthorizationTableData" height="22.5vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="patentName" label="专利名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="patentType" label="专利类型" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="authorizationDate" label="授权日期" align="center"></el-table-column>
        </el-table>
      </div>
    </div>

    <!--右下模块 省部级工法（当年）-->
    <div class="lowerRight">
      <div style="display: flex; align-items: center;">
        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
        <span style="color: white">省部级工法（当年）</span>
      </div>
      <div style="height: 0.5vh"></div>
      <div style="position: absolute;left: 3%;right: 3%">
        <el-table :header-cell-style="{background:'#0B243F',fontSize: '17px', fontWeight:'bold'}"
                  :data="pDCMTableData" height="22.5vh" border size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="constructionMethodName" label="工法名称" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="constructionMethodLevel" label="工法级别" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="DateOfIssuance" label="颁发日期" align="center"></el-table-column>
        </el-table>
      </div>
    </div>


  </div>
</template>
<script>

export default {
  data() {
    return {
      visible: false,
      oneCompanyHonorList: [ //荣誉图片
        {
          name: "2022",
          src: "images/middle/2022年科技创新先进集体.jpg",
          title: "2022年科技创新先进集体"
        },
        {
          name: "2021",
          src: "images/middle/2021年科技创新先进集体.jpg",
          title: "2021年科技创新先进集体"
        },
        {
          name: "2020",
          src: "images/middle/2020年科技创新先进集体.jpg",
          title: "2020年科技创新先进集体"
        },
      ],
      projectApprovalConfig: { // 科研立项
        header: ['项目编号', '项目名称', '立项日期'], //表头数据 Array<String>
        data: [ //表数据 Array<Array>
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3'],
          ['行11列1', '行11列2', '行11列3']
        ],
        index: true, //显示行号
        columnWidth: [130], //列宽度 Array<Number>
        align: ['center', 'center', 'center', 'center'], //列对齐方式 Array<String>
        indexHeader: '序号', //行号表头
        headerBGC: '#00AFE0', //表头背景色
      },
      appraisalTableData: [{ //成果鉴定
        achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
      }, {
        achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
      }],
      constructionMethodTableData: [{ //企业工法
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }, {
        constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
      }],
      progressAwardTableData: [{ //科技进步奖（当年）
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '工程建设科学技术奖', dateOfIssuance: '2023-06-06'
      }, {
        topicName: '土石坝推碾无人驾驶作业技术', awardName: '工程建设科学技术奖', dateOfIssuance: '2023-06-06'
      }],
      patentApplicationTableData: [{ //专利申请
        patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
      }, {
        patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
      }],
      patentAuthorizationTableData: [{ //专利授权
        patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
      }, {
        patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
      }],
      pDCMTableData: [{ //省部级工法
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }, {
        constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
      }],
    };
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped>
.app {
  position: relative;
  background: url('../../../../assets/images/bg.png') center center no-repeat, #0D1623; /*添加背景图片和颜色*/
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

.title-section {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10; /* 保证标题在最上层 */
  padding: 10px 0;
}

.title-content {
  color: #00afff; /* 标题文字颜色 */
  font-size: 30px;
  font-weight: bold;
}

.title-col { /* 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.top-image {*/
/*    top: 6%;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 6%; !* 调整图片高度为屏幕高度的6% *!*/
/*    object-fit: cover; !* 图片填充方式 *!*/
/*}*/

.top-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6%; /* 调整图片高度为屏幕高度的6% */
  object-fit: cover; /* 图片填充方式 */
}

/* 左上 */
.upperLeft {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.upperLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中上 */
.soSo {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.soSo:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 6%; /* 距离上面 6% */
  bottom: 67%; /* 距离下面 60% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.upperRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左中 */
.leftMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.leftMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中 */
.middle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}

/* 右中 */
.rightMiddle {
  position: absolute;
  top: 34%; /* 距离上面 43% */
  bottom: 33%; /* 距离下面 50% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.rightMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerLeft:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 中下 */
.lowerMiddle {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 33%; /* 距离左侧1% */
  width: 34%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerMiddle:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 68%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 68%; /* 距离左侧1% */
  width: 31%;
  border: 2px solid #03A9F3;
  background-color: rgba(9, 37, 59, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
  transform: scale(1); /* 初始缩放比例 */
  box-shadow: 0 0 0 transparent; /* 初始无阴影 */
}
.lowerRight:hover {
  border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
  background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
  transform: scale(1.05); /* 缩放至105% */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
}



/deep/.border-box-content {
  color: rgb(66, 185, 131) !important;
  font-size: 40px !important;
  font-weight: bold !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/deep/.el-table--mini {
  font-size: 11px !important;
}

/deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  background-color: #0B243F !important;
}

/deep/.el-table__body, .el-table__footer, .el-table__header {
  font-size: 16px !important;
}

/deep/.el-table th.el-table__cell>.cell {
  color: #00AFE0 !important;
}

/deep/.el-table td.el-table__cell div {
  color: white !important;
}

/deep/.el-table__body tr:hover > td {
  background-color: #788081 !important; /* 鼠标移入ElTable后的行背景色 */
}
</style>
